<template>
  <div class="about">
    <h1 class="page-title">关于项目</h1>
    
    <div class="card">
      <h2>项目介绍</h2>
      <p style="margin-top: 1rem; line-height: 1.6;">
        这是一个基于Vue2的项目模板，旨在为开发者提供一个快速启动Vue2项目的基础环境。
        模板集成了现代前端开发的最佳实践，包括模块化开发、组件化架构、状态管理等。
      </p>
    </div>

    <div class="card">
      <h2>技术栈</h2>
      <div style="margin-top: 1rem;">
        <h3 style="margin-bottom: 0.5rem;">核心框架</h3>
        <ul style="padding-left: 1.5rem; margin-bottom: 1rem;">
          <li><strong>Vue 2.6.14</strong> - 渐进式JavaScript框架</li>
          <li><strong>Vue Router 3.5.4</strong> - 官方路由管理器</li>
          <li><strong>Vuex 3.6.2</strong> - 状态管理模式</li>
        </ul>
        
        <h3 style="margin-bottom: 0.5rem;">构建工具</h3>
        <ul style="padding-left: 1.5rem; margin-bottom: 1rem;">
          <li><strong>Webpack 5</strong> - 模块打包工具</li>
          <li><strong>Babel</strong> - JavaScript编译器</li>
        </ul>
        
        <h3 style="margin-bottom: 0.5rem;">代码规范</h3>
        <ul style="padding-left: 1.5rem;">
          <li><strong>ESLint</strong> - 代码规范检查</li>
          <li><strong>Airbnb规范</strong> - 代码风格指南</li>
        </ul>
      </div>
    </div>

    <div class="card">
      <h2>项目结构</h2>
      <pre style="background: #f8f9fa; padding: 1rem; border-radius: 4px; margin-top: 1rem; font-size: 0.875rem; overflow-x: auto;">
src/
├── components/     # 公共组件
├── views/         # 页面组件
├── router/        # 路由配置
├── store/         # 状态管理
├── App.vue        # 根组件
└── main.js        # 入口文件
      </pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>
